The :target pseudo-class in CSS allows you to style an element that matches the current URL fragment identifier (the part after the # symbol). This is especially useful for highlighting the current section in a menu or single-page navigation.

Key Points About :target

1
:target selects the element whose ID matches the fragment in the URL (e.g., #about).
2
Useful for single-page websites with internal anchor links.
3
You can apply background color, border, or text effects to the active section.

Example: Highlight Current Section in a Menu

In this example, when you click on the 'About' link, the URL changes to include #about, and the corresponding section is highlighted with a blue border and light background using the :target pseudo-class.

Best Practices

1
Use :target for simple client-side navigation or highlighting without JavaScript.
2
Ensure each targetable section has a unique id.
3
Combine :target with smooth scrolling for a better user experience.
4
Avoid using :target for elements without valid id attributes — it won’t work.

Difficulty: 3/10

Topics: CSS :target pseudo-class, anchor-based navigation, client-side routing without JS

Scenario Questions

0-2 years experience

1
How would you highlight the current section in a one-page FAQ page when a user clicks a link like #section3?
2
What happens if you click a link to #nonexistent-id — does the :target style still apply to anything?

2-5 years experience

1
Our smooth-scrolling anchor links work fine, but the :target highlight disappears after a page refresh — why, and how would you fix it?
2
A designer wants the active section to have a glowing border, but it’s breaking on mobile Safari — what might be going wrong?

5-8 years experience

1
We’re building a documentation site with 50+ sections using :target for highlighting — how would you evaluate performance or accessibility risks at scale?
2
How would you design a fallback for users with JavaScript disabled while keeping the :target highlight working, and what tradeoffs does that introduce?

8+ years experience

1
We’re migrating from a legacy JS-based navigation system to pure CSS :target highlighting — what cross-team dependencies, testing gaps, or accessibility regressions should you anticipate?
2
If your team wants to adopt :target for client-side routing in a micro-frontend architecture, what long-term maintenance and state-sync challenges would you raise with the platform team?

Follow-up Questions

❓What happens if multiple elements on the page have the same ID?
❓How would you make this work if the page reloads and the hash changes?
❓Would this still work if the user navigates via the browser’s back button?